<template>
  <van-swipe :autoplay="3000" lazy-render class="img">
    <van-swipe-item v-for="image in images" :key="image" class="img-fit">
      <img :src="image" />
    </van-swipe-item>
  </van-swipe>
  <van-tabs v-model:active="active">
<!--    <van-tab title="关注" name="followers" to="/user/page">
    </van-tab>-->
    <van-tab title="官方公告" name="public" to="/user/page">

    </van-tab>
    <van-tab title="推荐" name="recommendations" to="/user/recommend">
    </van-tab>

  </van-tabs>
  <router-view></router-view>
</template>


<script setup lang="ts">
const active = ref(0);
import { ref, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import img1 from '../assets/run1.png';
import img2 from '../assets/run2.png';
import img3 from '../assets/run3.png';
import img4 from '../assets/run4.png';
// 初始化activeTab状态与推荐tab对应
const activeTab = ref('recommendations');
const router = useRouter();
const route = useRoute();
const images = [
  img1,
  img2,
  img3,
    img4,
];
onMounted(() => {
  // 当组件挂载时，如果当前路由不是推荐页，则导航到推荐页
  if (route.path !== '/user/page') {
    router.push('/user/page');
  }
});
</script>

<style scoped>
.img{
  width: 100%;
  max-height: 150px;
  position: relative;
}
.img-fit img{
  width: 100%;
  max-height: 150px;
}
</style>